<template>
  <view class="search-container">
    <filter-aside></filter-aside>
    <nav-bar></nav-bar>
    <view class="form-cont">
      <input @focus.once="keyword = ''" type="text" v-model.trim="keyword" />
      <view class="tips">拿破仑、巧克力、芝士、鲜奶、坚果</view>
      <button class="search-btn" @click="toSearch">点击搜索</button>
    </view>
  </view>
</template>

<script>
import FilterAside from '../../components/FilterAside.vue'
export default {
  name: 'search',
  data() {
    return {
      keyword: '请输入关键字',
    }
  },
  methods: {
    // 跳转搜索页
    toSearch() {
      if (!this.keyword) {
        return uni.showToast({
          title: '请输入关键字',
          duration: 2000,
          icon: 'none',
        })
      }
      this.$store.commit('filterSearch/updateParams', { fname: this.keyword })
      uni.navigateTo({
        url: '/pages/filter-search/filter-search',
      })
    },
  },
  components: { 'filter-aside': FilterAside },
}
</script>

<style lang="scss">
.search-container {
  .form-cont {
    padding: 20rpx 40rpx;
    text-align: center;
    input {
      width: 420rpx;
      height: 60rpx;
      margin: 0 auto;
      border-bottom: 1px solid #ddd;
      color: #999;
    }
    .tips {
      color: #ccc;
      font-size: $lxins-fs-12;
      line-height: 80rpx;
    }
    .search-btn {
      width: 600rpx;
      height: 100rpx;
      background-color: orange;
      color: #333;
    }
  }
}
</style>
